<template>
    <div class="openvip">
        <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
        <div class="vip-info bg-f space-between padding-24">
            <img :src="userinfo.user_avator" alt="">
            <div class="right flex-column">
                <div class="center-col">
                    <p class="fs-32">{{userinfo.nickname}}</p>
                    <div class="bg-r fs-32 center color-f" v-if="userinfo.is_vip==1">VIP</div>
                </div>
                <p class="color-6" v-if="userinfo.is_vip==1">{{userinfo.message}}</p>
                <p class="color-6" v-else>暂还不是音乐VIP</p>
            </div>
        </div>
        <div class="cost-list padding-24 ">
            <div class="list-item bg-f space-between padding-24" v-for="(item,index) in costlist" :key="index" :class="{current:index==cur}" @click="select(index,item)">
                <span class="tips color-f center" v-if="index==0">推荐</span>
                <div class="left flex-column" v-if="item.message">
                    <p class="fs-32">{{item.name}}</p>
                    <p class="color-9">{{item.message}}</p>
                </div>
                <div class="left center-col" v-else>
                    <p class="fs-32">{{item.name}}</p>
                </div>
                <div class="right">
                    <p class="fs-36 color-r">&yen;{{item.discount}}</p>
                    <p class="fs-26 color-9 order-price" v-if="item.price">&yen;{{item.price}}</p>
                </div>
            </div>
        </div>
        <div class="btn padding-24">
            <div class="bg-p center color-f fs-32" @click="open">{{userinfo.is_vip==1?'立即续费':'立即开通'}}</div>
        </div>
        <div class="pay logout" @touchmove.prevent v-if="wantpay">
            <div class="contents bg-f padding-24">
                <div class="close">
                    <img :src="close" alt="" @click="toclose">
                </div>
                <div class="top space-between">
                    <p class="fs-36">需支付</p>
                    <p class="color-r">&yen; <span>{{price}}</span></p>
                </div>
                <p class="title color-9">选择支付方式</p>
                <div class="pay-type">
                    <div class="item space-between">
                        <div class="left center-col">
                            <img :src="alipay" alt="">
                            <p class="fs-32">支付宝支付</p>
                        </div>
                        <div class="right center" @click="apay">
                            <p class="color-r fs-36" v-if="zhipay">✓</p>
                        </div>
                    </div>
                    <div class="item space-between">
                        <div class="left center-col">
                            <img :src="wxpay" alt="">
                            <p class="fs-32">微信支付</p>
                        </div>
                        <div class="right center" @click="wpay">
                            <p class="color-r fs-38" v-if="weixinpay">✓</p>
                        </div>
                    </div>
                </div>
                <div class="pay-btn bg-p color-f fs-32 center" @click="pay">立即支付</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'开通',
            type:2,
            cur:0,
            userinfo:'',
            costlist:[],
            price:0,
            wantpay:false,
            weixinpay:false,
            zhipay:false,
            close:require('../../assets/account/del.png'),
            alipay:require('../../assets/index/alipay.png'),
            wxpay:require('../../assets/index/wxpay.png'),
            timeid:null,
            orderinfo:'',
        }
    },
    created(){
        this.gettype()
        this.getmembershipTimeList()
       
    },
    methods:{
        getmembershipTimeList(){
            var url = this.$host1 + `home/vip/membershipTimeList`;
            this.$axios.get(url).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.userinfo=resData.data.top
                    this.costlist=resData.data.list  
                    this.price=this.costlist[0].discount
                    this.timeid=this.costlist[0].membership_time_id
                } else if(resData.code == 0){
                    // this.$router.push('/login');
                }else{
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        gettype(){
            this.type=this.$route.query.type
            //console.log(this.type)
            if(this.type==1){
                this.title='续费'
            }else if(this.type==2){
                this.title='开通'
            }
        },
        select(i,item){
            this.cur=i
            this.price=item.discount
            this.timeid=item.membership_time_id
            //console.log(item)
        },
        open(){
            var url = this.$host1 + `home/vip/vipOrder`;
            var data = {
                membership_time_id:this.timeid,
            }
            this.$axios.post(url,data).then(res => {
                console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.orderinfo=resData.data
                    this.wantpay=true
                } else{
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
            
        },
        toclose(){
            this.wantpay=false
            this.weixinpay=false
            this.zhipay=false
        },
        apay(){
            this.zhipay=!this.zhipay
            this.weixinpay=false
        },
        wpay(){
            this.weixinpay=!this.weixinpay
            this.zhipay=false
        },
        pay(){
            if(this.weixinpay==false&&this.zhipay==false){
                this.AlertWin('请选择支付方式！');
                return
            }
            if(this.weixinpay==true){
                //this.AlertWin('微信支付');//到时候直接调微信支付的接口就行了，支付宝支付也是一样
                if(this.isapp == 0){
                    window.location.href = this.$host1 +`pay/vip_index?order_number=${this.orderinfo.order_syn}`
                }else if(this.isapp){
                    var sendData = {
                    'type': '3',
                    'data': this.orderinfo.order_syn
                    };
                    window.postMessage(JSON.stringify(sendData));
                }
                
            }else{
                if(this.isapp==0){
                    window.location.href = this.$host1+`ali_pay.php?order_sn=${this.orderinfo.order_syn}`
                }else if(this.isapp){
                    var sendData = {
                    'type': '8',
                    'data': this.orderinfo.order_syn
                    };
                    window.postMessage(JSON.stringify(sendData));
                }   
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.openvip{
    .vip-info{
        margin-top: 1rem;
        height: 1.6rem;
        img{
            width: 0.94rem;
            height: 0.94rem;
            border-radius: 50%;
        }
        .right{
            width: calc(100% - 1.14rem);
            height: 0.94rem;
            //background-color: greenyellow;
            .center-col{
                .center{
                    margin-left: 0.3rem;
                    width: 1rem;
                    height: 0.46rem;
                    border-radius: 0.23rem;
                }
            }
        }
    }
    .cost-list{
        margin-top: 0.2rem;
        .list-item{
            position: relative;
            width: 100%;
            height: 1.6rem;
            border-radius: 0.1rem;
            margin-bottom: 0.2rem;
            //box-sizing: border-box;
            border: 0.01rem solid #fff;
            .left{
                height: 0.86rem;
            }
            .order-price{
                text-decoration: line-through;
            }
            .tips{
                width: 0.9rem;
                height: 0.4rem;
                position: absolute;
                right: 0;
                top: 0;
                background-color: #ffb200;
                border-radius: 0.1rem;
            }
        }
        .current{
            border: 0.01rem solid #F44349;
            background-color: #feecec;
        }
    }
    .btn{
        height: 0.9rem;
        margin: 2rem auto 0.2rem;
        div{
            width: 100%;
            height: 100%;
            border-radius: 0.45rem;
            letter-spacing: 0.1rem;
        }
    }
    .pay{
        .contents{
            width: 100%;
            height: 6.6rem;
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius: 0.15rem 0.15rem 0 0;
            .close{
                width: 0.48rem;
                height: 0.48rem;
                position: absolute;
                margin-top: -0.8rem;
                right: 0.24rem;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .top{
                height: 1.8rem;
                border-bottom: 0.01rem solid #e9e9e9;
                .color-r{
                    span{
                        font-size: 0.6rem;
                    }
                }
            }
            .title{
                height: 1rem;
                line-height: 1rem;
            }
            .pay-type{
                .item{
                    height: 1rem;
                    .left{
                        img{
                            width: 0.5rem;
                            height: 0.5rem;
                            margin-right: 0.2rem
                        }
                    }
                    .right{
                        width: 0.44rem;
                        height: 0.44rem;
                        border: 0.01rem solid #999;
                        border-radius: 0.06rem;
                        p{
                            font-weight: 800
                        }
                    }
                }
            }
            .pay-btn{
                margin-top: 0.3rem;
                width: 100%;
                height: 0.9rem;
                border-radius: 0.45rem;
            }
        }
    }
}
</style>